<script setup>
import { useRouter } from 'vue-router'
import SelectInfo from '@/components/screener/SelectInfo.vue'
import { ref } from 'vue'
import { showToast } from 'vant'
import none_img from '@/assets/none.png'

const router = useRouter()
const value = ref('')
const onSearch = (val) => showToast(val)
const onClickButton = () => showToast('搜索')
const onClickLeft = () => {
  router.go(-1)
}
</script>

<template>
  <div>
    <van-nav-bar title="选择学校" left-arrow @click-left="onClickLeft" />
    <div>
      <van-row>
        <van-col span="11">
          <select-info />
        </van-col>
        <van-col span="2">
          <van-divider vertical :style="{ borderColor: '#1e1f22' }" />
        </van-col>
        <van-col span="11">
          <select-info />
        </van-col>
      </van-row>
    </div>
    <div>
      <form action="/">
        <van-search
          class="search-input"
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton" class="search-button">搜索</div>
          </template>
        </van-search>
      </form>
    </div>

    <div class="school-select-image">
      <van-image width="100%" height="100%" :src="none_img" />
    </div>
  </div>
</template>

<style scoped>
.search-button {
  color: #29e1bf;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  background-color: #f7f8fa;
}

.school-select-image {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
